// 样式的抽离
.w(@px) {
  width: @px;
  width: unit((@px / @rootpx), rem);
}

.min-w(@px) {
  min-width: unit((@px / @rootpx), rem);
}

.max-w(@px) {
  max-width: unit((@px / @rootpx), rem);
}

.h(@px) {
  height: @px;
  height: unit((@px / @rootpx), rem);
}

.min-h(@px) {
  min-height: unit((@px / @rootpx), rem);
}

.max-h(@px) {
  max-height: unit((@px / @rootpx), rem);
}

.top(@px) {
  top: unit((@px/@rootpx), rem);
}

.bottom(@px) {
  bottom: unit((@px/@rootpx), rem);
}

.right(@px) {
  right: unit((@px/@rootpx), rem);
}

.left(@px) {
  left: unit((@px/@rootpx), rem);
}

.margin-left(@px) {
  margin-left: unit((@px/@rootpx), rem);
}

.margin-right(@px) {
  margin-right: unit((@px/@rootpx), rem);
}

.margin-bottom(@px) {
  margin-bottom: unit((@px/@rootpx), rem);
}

.margin-top(@px) {
  margin-top: unit((@px/@rootpx), rem);
}

.padding-left(@px) {
  padding-left: unit((@px/@rootpx), rem);
}

.padding-right(@px) {
  padding-right: unit((@px/@rootpx), rem);
}

.padding-bottom(@px) {
  padding-bottom: unit((@px/@rootpx), rem);
}

.padding-top(@px) {
  padding-top: unit((@px/@rootpx), rem);
}

.line-height(@px) {
  line-height: unit((@px/@rootpx), rem);
}

.padding(@top, @right, @bottom, @left) {
  padding-top: unit((@top/@rootpx), rem);
  padding-right: unit((@right/@rootpx), rem);
  padding-bottom: unit((@bottom/@rootpx), rem);
  padding-left: unit((@left/@rootpx), rem);
}

.margin(@top, @right, @bottom, @left) {
  margin-top: unit((@top/@rootpx), rem);
  margin-right: unit((@right/@rootpx), rem);
  margin-bottom: unit((@bottom/@rootpx), rem);
  margin-left: unit((@left/@rootpx), rem);
}

.border-radius(@px) {
  border-radius: unit((@px/@rootpx), rem);
}

// 抽离首页公共的title
.more {
  .h(32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .margin-bottom(10);
  color: #fff;

  h1 {
    font-size: 20px;
  }

  p {
    font-size: 12px;
    color: #909399;
    .margin-right(20);
  }
}

// 抽离的 最新专辑 推荐歌单的box类似的样式
.mbox {
  overflow-x: scroll;
  display: flex;
  align-items: center;

  // justify-content: center;
  li {
    position: relative;
    display: flex;
    flex-direction: column;
    // justify-content: space-evenly;
    .margin-right(15);
    .h(206);

    img {
      .w(152);
      .h(152);
      .border-radius(10);
    }

    h2 {
      .w(152);
      font-size: 13px;
      color: #fff;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      .margin-top(13);
    }

    p {
      font-size: 12px;
      color: #909399;
      .margin-top(8);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      .w(152);
    }

    .play {
      display: block;
      .w(22);
      .h(22);
      position: absolute;
      right: 0;
      bottom: 0;
      .margin-bottom(65);
      .margin-right(10);
    }
  }
}

// 同上只是视频板块的图片大小改变
.mbox2 {
  overflow-x: scroll;
  display: flex;
  align-items: center;

  // justify-content: center;
  li {
    position: relative;
    display: flex;
    flex-direction: column;
    // justify-content: space-evenly;
    .margin-right(15);
    .h(206);

    img {
      .w(257);
      .h(161);
      .border-radius(10);
    }

    h2 {
      .w(252);
      font-size: 13px;
      color: #fff;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      .margin-top(13);
    }

    p {
      font-size: 12px;
      color: #909399;
      .margin-top(8);
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      .w(252);
    }

    .play {
      display: block;
      .w(22);
      .h(22);
      position: absolute;
      right: 0;
      bottom: 0;
      .margin-bottom(65);
      .margin-right(10);
    }
  }
}